<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令绑定class</title>
</head>
<body>

<div id="app">
    <div class="test" :class="{'active':isActive,'error':!}"></div>
    <!-- app的区域被渲染为下面的信息 -->
    <!-- <div class="test active"></div> -->
</div>

<div id="app1">
    <div :class="{'active':isActive,'error':isError}"></div>
</div>


<div id="app2">
    <div :class="classes"></div>
</div>

<!-- v-bind指令用于动态更新HTML元素的属性-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /*
    * 在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定，它们也是html的属性，因此可以使用v-bind指令。
    *
    * 对象语法：给v-bind:class设置一个对象，可以动态地切换class;
    * 对象中也可以传入多个属性，来动态切换class，此外:class可以与普通class共存;
    * :class内的表达式每项为真时，对应的类名就会加载。
    * */

    var app = new Vue({
        el:"#app",
        data:{
            isActive:true,
            isError:false,
        }
    });

    /*
    * 当:class的表达式过长或者逻辑较为复杂时，还可以绑定一个计算属性，一般当条件多于两个时可以使用data或者computed计算属性
    * 其实你还可以直接绑定一个Object类型的数据，或者使用类似计算属性的methods.
    * */

    //采用data方法为DOM元素添加多个样式名称class
    var app1 = new Vue({
        el:"#app1",
        data:{
            isActive:true,
            isError:false
        }
    });
    //采用computed方法为DOM元素添加多个样式名称class
    var app2 = new Vue({
        el:"#app2",
        data:{
            isActive:true,
            error:null,
        },
        computed:{
            classes:function () {
                return{
                    active:this.isActive && !this.error,
                    'text-fail':this.error && this.error.type==='fail'
                }
            }
        }
    })

</script>
</body>
</html>